<template>
	<div class="container">
		<el-row>
			<el-col :span="2" class="mr20">
				<div class="title">
					历史检查 | ( 1 )
					<!-- <h4 class="dis_inline">({{ count }})</h4> -->
				</div>
			</el-col>
			<el-col :span="9">
				<div class="exam_Item">
					<i class="iconfont" v-if="titleData.length > 3">&#xe68f;</i>
					<div
						class="item"
						@click="getRelatedDetail(item, index)"
						v-for="(item, index) in titleData"
						:key="index"
					>
						<div :class="{ active: active == index }">
							<span class="text">{{
								index + 1 + '.' + item.exam_type + '-' + item.exam_item
							}}</span>
							<span style="margin-left:20px">{{ item.perform_time }}</span>
						</div>
						<i class="iconfont" v-if="index !== titleData.length - 1"
							>&#xe691;</i
						>
					</div>
					<i class="iconfont" v-if="titleData.length > 3">&#xe68e;</i>
				</div>
			</el-col>
			<!--
			<el-col :span="12" class="tr check_title">
				<span @click="showApply_rep = true;showApply = true;showMove_film = false">
					<i class="iconfont">&#xe66e;</i>申请单
				</span>
				<span @click="showApply_rep=true;showApply = false;showMove_film = false">
					<i class="iconfont">&#xe66f;</i>报告
				</span>
				<span @click="showApply_rep = false;showMove_film = true">
					<i class="iconfont">&#xe671;</i>影像
				</span>
				<span @click="showApply_rep = false;showMove_film = true">
					<i class="iconfont">&#xe672;</i>胶片
				</span>
				<span @click="goBack">
					<i class="iconfont">&#xe674;</i>
				</span>
			</el-col>
			-->
		</el-row>

		<div class="check_title">
			<el-row>
				<!--
				<el-col :span="12" class="name">
					<span v-text="detailData.sexFlag === '阳'? '[阳性]':'[阴性]'"></span>
					<span v-text="detailData.name"></span>
					<span v-text="detailData.ct"></span>
					<span v-text="detailData.ct2"></span>
					<span v-text="detailData.time"></span>
					<span v-text="detailData.result" class="hasfinish">审核完成</span>
				</el-col>
					-->
				<el-col :span="12" :offset="11" class="tr">
					<span
						@click="
							showApply_rep = true
							showApply = true
							showMove_film = false
						"
					>
						<i class="iconfont">&#xe66e;</i>申请单
					</span>
					<span
						@click="
							showApply_rep = true
							showApply = false
							showMove_film = false
						"
					>
						<i class="iconfont">&#xe66f;</i>报告
					</span>
					<span
						@click="
							showApply_rep = false
							showMove_film = true
						"
						v-if="hasShow.hasImage"
					>
						<i class="iconfont">&#xe671;</i>影像
					</span>
					<span
						@click="
							showApply_rep = false
							showMove_film = true
						"
						v-if="hasShow.hasFilm"
					>
						<i class="iconfont">&#xe672;</i>胶片
					</span>
					<span @click="goBack">
						<i class="iconfont">&#xe674;</i>
					</span>
				</el-col>
			</el-row>
		</div>

		<!-- 影像胶片报告单-->
		<div class="main-content">
			<div v-if="showApply_rep">
				<!-- 基本信息-->
				<div class="basic">
					<h3>基本信息</h3>
					<div class="line"></div>
					<div class="box">
						<el-row>
							<el-col :span="12"
								><i>姓名:</i
								><span>{{ applicationData.patient_name }}</span></el-col
							>
							<el-col :span="12"
								><i>性别:</i><span>{{ applicationData.patientSex }}</span>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12"
								><i>年龄:</i
								><span>{{
									applicationData.patient_age + applicationData.age_unit
								}}</span>
							</el-col>
							<el-col :span="12"
								><i>病区:</i
								><span>{{ applicationData.in_patient_ward }}</span></el-col
							>
						</el-row>
						<el-row>
							<el-col :span="12"
								><i>就诊类型:</i>
								<span v-if="applicationData.patient_class === 0">门诊</span>
								<span v-if="applicationData.patient_class === 1">住院</span>
								<span v-if="applicationData.patient_class === 2">急诊</span>
								<span v-if="applicationData.patient_class === 3">体检</span>
								<span v-if="applicationData.patient_class === 4">普通</span>
							</el-col>
							<el-col :span="12"
								><i>住院号:</i
								><span>{{ applicationData.in_patient_no }}</span></el-col
							>
						</el-row>
						<el-row>
							<el-col :span="12"
								><i>病历号:</i
								><span>{{ applicationData.med_rec_no }}</span></el-col
							>
							<el-col :span="12"
								><i>床号:</i
								><span>{{ applicationData.in_patient_bed }}</span></el-col
							>
						</el-row>
						<el-row>
							<el-col :span="12"
								><i>申请科室:</i
								><span>{{ applicationData.req_depart_name }}</span></el-col
							>
							<el-col :span="12"
								><i>检查类型:</i
								><span>{{ applicationData.exam_type }}</span></el-col
							>
						</el-row>
						<el-row>
							<el-col :span="24"
								><i>检查项目:</i
								><span>{{ applicationData.exam_item }}</span></el-col
							>
						</el-row>
						<el-row>
							<el-col :span="24"
								><i>检查部位:</i
								><span>{{ applicationData.exam_body_part }}</span></el-col
							>
						</el-row>
					</div>
				</div>
				<!-- 申请信息-->
				<div class="apply">
					<h3 v-if="showApply === true">申请信息</h3>
					<h3 v-if="showApply === false">诊断信息</h3>
					<div class="line"></div>
					<div class="box">
						<el-row>
							<el-col :span="4"><i>临床诊断:</i></el-col>
							<el-col :span="20">{{ applicationData.clinic_diagnosis }}</el-col>
						</el-row>
						<!--申请单-->
						<div v-if="showApply === true">
							<el-row>
								<el-col :span="4"><i>病史摘要:</i></el-col>
								<el-col :span="20">{{
									applicationData.relevant_clinical_info
								}}</el-col>
							</el-row>
							<!-- 	<el-row>
								<el-col :span="4"><i>检查告知:</i></el-col>
								<el-col :span="20">{{applicationData.relevant_clinical_info}}</el-col>
							</el-row>
							-->
						</div>
						<!--报告-->
						<div v-if="showApply === false">
							<el-row>
								<el-col :span="4"><i>影像所见:</i></el-col>
								<el-col :span="20">{{ applicationData.image_sight }}</el-col>
							</el-row>
							<el-row>
								<el-col :span="4"><i>影像诊断:</i></el-col>
								<el-col :span="20">{{
									applicationData.image_diagnosis
								}}</el-col>
							</el-row>
						</div>
					</div>

					<div class="line"></div>
					<div class="box">
						<el-row v-if="showApply === true">
							<el-col :span="6"
								><i>申请医生:</i
								><span>{{ applicationData.req_doctor_name }}</span></el-col
							>
							<el-col :span="6"
								><i>申请科室:</i
								><span>{{ applicationData.req_depart_name }}</span></el-col
							>
							<el-col :span="12"
								><i>申请时间:</i
								><span>{{ applicationData.req_time }}</span></el-col
							>
						</el-row>
						<el-row v-if="showApply === false">
							<el-col :span="6"
								><i>报告医生:</i
								><span>{{ applicationData.report_doctor_name }}</span></el-col
							>
							<el-col :span="6"
								><i>审核医生:</i
								><span>{{ applicationData.audit_doctor_name }}</span></el-col
							>
							<el-col :span="12"
								><i>报告时间:</i
								><span>{{ applicationData.report_time }}</span></el-col
							>
						</el-row>
					</div>
				</div>
			</div>
			<!-- 图文报告-->
			<div v-if="show_report_result_img">
				图文报告
				<img src="" alt="" />
			</div>
			<div v-if="showMove_film === true">影像或者是胶片</div>
		</div>
	</div>
</template>

<script>
import { getRelated, getRelatedDetail } from '@/api/archive-record'
export default {
	data () {
		return {
			detailData: {
				sexFlag: '阴',
				name: '黄书焕',
				ct: 'CT',
				ct2: '常规CT',
				time: '2020-12-28',
				result: '审核通过',
			},
			titleData: [],
			showApply_rep: true,
			showReport: false,
			showApply: true, // 报告申请单
			showMove_film: false,
			applicationData: {}, // 申请单数据
			listQuery: {
				id: null
			},
			count: 0,
			show_report_result_img: false,// 显示图片
			active: 0,
			hasShow: {
				hasFilm: true,
				hasImage: true
			}
		}
	},
	mounted () {
		this.listQuery.id = this.$route.query.id
		this.getRelated()
		this.getRelatedDetail()
	},
	methods: {
		getRelated () {
			//  todo获取检查记录
			let params = {}
			getRelated( this.listQuery ).then( res => {
				try {
					if ( res.data.length > 0 ) {
						console.log( res.data );
						// this.titleData = res.data || {}
						res.data.map( item => item.perform_time = item.perform_time.slice( 0, 10 ) )
						let tempData = []
						tempData.push( res.data[ 0 ] )
						this.titleData = tempData

						// this.count = res.data.length || 0
						this.count = 1

						this.getRelatedDetail( { id: this.titleData[ 0 ].id } )
					}
				} catch {
					console.log( 'error' )
				}
			} )
		},
		getRelatedDetail ( item, index ) {
			// 切换检查项目
			this.active = index || 0
			console.log( index )
			let params = {
				id: item.id
			}
			getRelatedDetail( params ).then( res => {
				if ( res.code === 0 ) {
					if ( res.data.patient_sex === 0 ) {
						res.data.patientSex = '男'
					} else if ( res.data.patient_sex === 1 ) {
						res.data.patientSex = '女'
					} else {
						res.data.patientSex = '未知'
					}
					this.applicationData = res.data
					this.hasShow = {
						hasFilm: res.data.has_film,
						hasImage: res.data.has_image,
						hasReport: res.data.has_report,
						hasRequest: res.data.has_request,
					}
					//todo 图文报告单
					console.log( res );
				}
			} )
		},
		goBack () {
			history.back( -1 )
		},

	},
}
</script>
<style scoped lang="less">
.container {
	padding-left: 20px;
	.title {
		height: 39px;
		line-height: 39px;
		font-weight: 600;
	}
	.exam_Item {
		// height: 100px;
		width: 80vw;
		// border: 1px solid #dddddd;
		.item {
			.text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100px;
				display: inline-block;
			}
			// width: 200px;
			// height: 70px;
			// background-image: url('~@/assets/imgs/common.png');
			// background-size: 100% 100%;
			// background-repeat: no-repeat;
			display: inline-block;
			text-align: left;
			box-sizing: content-box;
			cursor: pointer;
			> div {
				color: #333333;
				font-weight: 500;
				border-radius: 4px;
				border: 1px solid rgba(221, 221, 221, 1);
				// margin-top: 10px;
				// margin-right: 40px;
				background: #f5f5f5;
				padding: 8px;
				display: inline-block;
			}
			.iconfont {
				color: #dddd;
				display: inline-block;
				margin: 15px;
			}
		}
	}
	.check_title {
		height: 50px;
		line-height: 50px;
		// background-color: #f5f5f5;
		color: #333333;
		margin-bottom: 20px;
		.el-row {
			> :nth-child(1) {
				color: #333;
				font-weight: 600;
				span {
					margin-left: 20px;
					font-weight: 400;
				}
			}
			.tr span {
				cursor: pointer;
				color: #0a70b0;
			}
			> :nth-child(2) {
				color: #0a70b0;
				text-align: right;
				span {
					margin-right: 3.2%;
					cursor: pointer;
				}
			}
		}
	}
	.active {
		color: #fff !important;
		background-color: #0a70b0 !important;
	}
	.hasfinish {
		color: @49B523;
	}
	.main-content {
		.el-row {
			margin-top: 20px;
		}
		h3 {
			font-weight: 600;
		}
		width: 60%;
		min-height: 500px;
		margin-top: 20px;
		padding: 40px;
		margin: 0 auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
		.line {
			width: 100%;
			height: 4px;
			border-bottom: 1px solid #dddddd;
			border-top: 1px solid #dddddd;
			margin: 8px 0;
		}
		i {
			color: #999;
			width: 80px;
			display: inline-block;
			text-align: justify;
			text-justify: distribute-all-lines; /*ie6-8*/
			text-align-last: justify; /* ie9*/
			-moz-text-align-last: justify; /*ff*/
			-webkit-text-align-last: justify; /*chrome 20+*/
			margin-right: 10px;
		}
		.basic {
			padding-top: 54px 0;
			// height: 262px;
			.el-col-4 {
				width: 24.66667%;
				margin-top: 20px;
			}

			.box {
				padding-bottom: 40px;
			}
		}
		.apply .box {
			padding-bottom: 20px;
		}
	}
}
</style>
